<template>
	<div class="wrapper">

		<!-- header部分 -->
		<header>
			<i class="fa fa-angle-left" @click="goToIndex"></i>
			<p>商家信息</p>
		</header>

		<!-- 加载状态 -->
		<div class="loading-container" v-if="isLoading">
			<div class="loading-text">加载中...</div>
		</div>

		<!-- 错误状态 -->
		<div class="error-container" v-else-if="hasError">
			<div class="error-text">
				<p>加载失败</p>
				<p>商家ID: {{ businessId }}</p>
				<p>{{ errorMessage }}</p>
				<button @click="retryLoad" class="retry-btn">重试</button>
			</div>
		</div>

		<!-- 正常内容 -->
		<div v-else>
			<!-- 商家logo部分 -->
			<div class="business-logo" v-if="business && business.businessImg">
				<img :src="business.businessImg" alt="商家图片">
			</div>
			<div class="business-logo-placeholder" v-else-if="business">
				<div class="placeholder-img">
					<i class="fa fa-image"></i>
					<p>暂无图片</p>
				</div>
			</div>

			<!-- 商家信息部分 -->
			<div class="business-info" v-if="business && business.businessName">
				<h1>{{business.businessName}}</h1>
				<p>&#165;{{business.startPrice || 0}}起送 &#165;{{business.deliveryPrice || 0}}配送</p>
				<p>{{business.businessExplain || '暂无介绍'}}</p>
			</div>
			<div class="business-info-placeholder" v-else>
				<h1>商家信息加载中...</h1>
			</div>

			<!-- 食品列表部分 -->
			<ul class="food" v-if="foodArr && foodArr.length > 0">
				<li v-for="(item, index) in foodArr" :key="item.foodId || index">
					<div class="food-left">
						<img :src="item.foodImg || '/src/assets/sp01.png'" alt="Food Image" @error="handleImageError">
						<div class="food-left-info">
							<h3>{{ item.foodName || '未知食品' }}</h3>
							<p>{{ item.foodExplain || '暂无描述' }}</p>
							<p>&#165;{{ item.foodPrice || 0 }}</p>
						</div>
					</div>
					<div class="food-right">
						<div>
							<i class="fa fa-minus-circle" @click="minus(index)" v-show="item.quantity!=0"></i>
						</div>
						<p><span v-show="item.quantity!=0">{{item.quantity}}</span></p>
						<div>
							<i class="fa fa-plus-circle" @click="add(index)"></i>
						</div>
					</div>
				</li>
			</ul>
			<div class="no-food" v-else>
				<p>暂无食品信息</p>
			</div>
		</div>

		<!-- 购物车部分 -->
		<div class="cart">
			<div class="cart-left">
				<div class="cart-left-icon" 
					 @click="showCartDetail" 
					 :style="totalQuantity==0?'background-color:#505051;':'background-color:#3190E8;'"
					 style="cursor: pointer;">
					<i class="fa fa-shopping-cart"></i>
					<div class="cart-left-icon-quantity" v-show="totalQuantity!=0">{{totalQuantity}}</div>
				</div>
				<div class="cart-left-info">
					<p>&#165;{{totalPrice}}</p>
					<p>另需配送费{{business ? business.deliveryPrice : 0}}元</p>
				</div>
			</div>
			<div class="cart-right">
				<!-- 不够起送费 -->
				<div class="cart-right-item" v-show="business && parseFloat(totalPrice)<business.startPrice" style="background-color: #535356;cursor: default;">
					&#165;{{business ? business.startPrice : 0}}起送
				</div>
				<!-- 达到起送费 -->
				<div class="cart-right-item" @click="toOrder" v-show="business && parseFloat(totalPrice)>=business.startPrice">
					去结算
				</div>
			</div>
		</div>

		<!-- 购物车详情弹窗 -->
		<div class="cart-detail-overlay" v-show="showCartDetailModal" @click="hideCartDetail">
			<div class="cart-detail-modal" @click.stop>
				<div class="cart-detail-header">
					<h3>购物车详情</h3>
					<i class="fa fa-times close-btn" @click="hideCartDetail"></i>
				</div>
				<div class="cart-detail-content">
					<div class="cart-item" v-for="(item, index) in cartItems" :key="index">
						<div class="cart-item-info">
							<img :src="item.foodImg || '/src/assets/sp01.png'" @error="handleImageError" alt="Food Image" class="cart-item-img">
							<div class="cart-item-details">
								<h4>{{item.foodName}}</h4>
								<p class="cart-item-desc">{{item.foodExplain}}</p>
								<p class="cart-item-price">¥{{item.foodPrice}}</p>
							</div>
						</div>
						<div class="cart-item-controls">
							<div class="quantity-control">
								<i class="fa fa-minus-circle" @click="minus(getFoodIndexById(item.foodId))"></i>
								<span class="quantity">{{item.quantity}}</span>
								<i class="fa fa-plus-circle" @click="add(getFoodIndexById(item.foodId))"></i>
							</div>
							<div class="item-total">¥{{(item.foodPrice * item.quantity).toFixed(2)}}</div>
						</div>
					</div>
					<div class="cart-empty" v-if="cartItems.length === 0">
						<i class="fa fa-shopping-cart empty-icon"></i>
						<p>购物车是空的</p>
						<p>快去选购商品吧！</p>
					</div>
				</div>
				<div class="cart-detail-footer" v-if="cartItems.length > 0">
					<div class="cart-summary">
						<div class="summary-row">
							<span>商品总价</span>
							<span>¥{{totalPrice}}</span>
						</div>
						<div class="summary-row">
							<span>配送费</span>
							<span>¥{{business ? business.deliveryPrice : 0}}</span>
						</div>
						<div class="summary-row total-row">
							<span>合计</span>
							<span>¥{{totalSettle}}</span>
						</div>
					</div>
					<div class="cart-actions">
						<button class="clear-cart-btn" @click="clearCart">清空购物车</button>
						<button class="checkout-btn" 
								@click="toOrder" 
								:disabled="business && parseFloat(totalPrice) < business.startPrice"
								:class="{'disabled': business && parseFloat(totalPrice) < business.startPrice}">
							{{ business && parseFloat(totalPrice) < business.startPrice ? `还差¥${(business.startPrice - parseFloat(totalPrice)).toFixed(2)}起送` : '去结算' }}
						</button>
					</div>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	export default {
		name: 'BusinessInfo',
		data() {
			return {
				businessId: this.$route.query.businessId,
				business: null,
				foodArr: [],
				user: null,
				isLoading: true,
				hasError: false,
				errorMessage: '',
				showCartDetailModal: false // 购物车详情弹窗显示状态
			}
		},
		created() {
			console.log('=== BusinessInfo组件初始化 ===');
			// 从路由参数获取商家ID
			this.businessId = this.$route.query.businessId;
			console.log('商家ID:', this.businessId);
			
			// 获取当前登录用户
			const userInfoStr = localStorage.getItem('user-info');
			if (userInfoStr) {
				try {
					this.user = JSON.parse(userInfoStr);
				} catch (e) {
					console.error('解析用户信息失败:', e);
				}
			}
			
			// 加载数据
			this.loadBusinessData();
		},
		methods: {
			// 加载商家数据
			async loadBusinessData() {
				if (!this.businessId) {
					this.hasError = true;
					this.errorMessage = '商家ID缺失';
					this.isLoading = false;
					return;
				}

				this.isLoading = true;
				this.hasError = false;
				this.errorMessage = '';

				try {
					// 并行请求商家信息和食品列表
					await Promise.all([
						this.getBusinessInfo(),
						this.getFoodList()
					]);
					
					// 如果用户已登录，加载购物车
					if (this.user) {
						this.listCart();
					}
					
				} catch (error) {
					console.error('加载数据失败:', error);
					this.hasError = true;
					this.errorMessage = error.message || '数据加载失败';
				} finally {
					this.isLoading = false;
				}
			},
			
			// 获取商家信息
			getBusinessInfo() {
				return new Promise((resolve, reject) => {
					try {
						// 使用新的API服务
						import('@/api').then(({ businessApi }) => {
							businessApi.getBusinessById(this.businessId)
								.then(businessData => {
									console.log('商家信息API响应:', businessData);
									
									if (businessData && typeof businessData === 'object') {
										this.business = businessData;
										
										// 加载商家图片
										import('@/api').then(({ imageApi }) => {
											// 使用商家ID获取图片二进制数据URL
											this.business.businessImg = imageApi.getBusinessImageBinary(this.businessId);
											console.log('商家图片URL设置为:', this.business.businessImg);
										});
										
										console.log('商家信息设置成功:', this.business);
										resolve(businessData);
									} else {
										console.warn('商家信息响应为空或格式错误:', businessData);
										reject(new Error('商家信息获取失败'));
									}
								})
								.catch(error => {
									console.error('获取商家信息失败:', error);
									reject(error);
								});
						});
					} catch (error) {
						console.error('API加载失败:', error);
						reject(error);
					}
				});
			},
			
			// 获取食品列表
			getFoodList() {
				return new Promise((resolve, reject) => {
					try {
						// 使用新的API服务
						import('@/api').then(({ foodApi, imageApi }) => {
							foodApi.getFoodListByBusinessId(this.businessId)
								.then(foodData => {
									console.log('食品列表API响应:', foodData);
									
									if (foodData && Array.isArray(foodData)) {
										this.foodArr = foodData;
										console.log('食品数量:', this.foodArr.length);
										
										// 初始化数量和准备图片URL
										for (let i = 0; i < this.foodArr.length; i++) {
											this.foodArr[i].quantity = 0;
											
											// 如果没有图片URL或图片URL不可用，设置二进制图片URL
											const food = this.foodArr[i];
											const foodId = food.id || food.foodId;
											if (foodId && (!food.foodImg || food.foodImg.trim() === '')) {
												food.foodImg = imageApi.getFoodImageBinary(foodId);
												console.log(`为食品ID ${foodId} 设置二进制图片URL: ${food.foodImg}`);
											}
										}
										
										resolve(foodData);
									} else {
										console.warn('食品列表响应格式错误:', typeof foodData, foodData);
										// 即使食品列表为空也不算错误
										this.foodArr = [];
										resolve([]);
									}
								})
								.catch(error => {
									console.error('获取食品列表失败:', error);
									reject(error);
								});
						});
					} catch (error) {
						console.error('API加载失败:', error);
						reject(error);
					}
				});
			},
			
			// 重试加载
			retryLoad() {
				console.log('重试加载数据');
				this.loadBusinessData();
			},
			
			// 处理图片加载错误
			handleImageError(event) {
				console.log('图片加载失败，尝试使用二进制数据URL');
				
				// 检查是否是食品图片（根据DOM结构确定）
				const img = event.target;
				const parentItem = img.closest('li');
				if (parentItem) {
					// 可能是食品图片
					const index = Array.from(parentItem.parentNode.children).indexOf(parentItem);
					if (index >= 0 && index < this.foodArr.length) {
						const foodItem = this.foodArr[index];
						const foodId = foodItem.id || foodItem.foodId;
						
						if (foodId) {
							// 使用imageApi加载图片二进制数据
							import('@/api').then(({ imageApi }) => {
								img.src = imageApi.getFoodImageBinary(foodId);
								console.log('重设食品图片URL为二进制数据:', img.src);
							});
							return;
						}
					}
				}
				
				// 默认备选图片
				event.target.src = '/src/assets/sp01.png';
			},
			
			listCart() {
				try {
					// 使用新的API服务
					import('@/api').then(({ cartApi }) => {
						cartApi.getCartList(this.businessId)
							.then(cartData => {
								console.log('购物车数据:', cartData);
								
								// 确保cartData是数组
								if (!Array.isArray(cartData)) {
									console.warn('购物车数据不是数组:', typeof cartData, cartData);
									cartData = [];
								}
								
								// 更新食品数量
								for (let foodItem of this.foodArr) {
									foodItem.quantity = 0;
									for (let cartItem of cartData) {
										if (cartItem.food && cartItem.food.id === foodItem.id) {
											foodItem.quantity = cartItem.quantity;
										}
									}
								}
								
							})
							.catch(error => {
								console.error('获取购物车失败:', error);
							});
					});
				} catch (error) {
					console.error('API加载失败:', error);
				}
			},

			add(index) {
				if (!this.user) {
					this.$router.push('/login');
					return;
				}
				
				let food = this.foodArr[index];
				food.quantity++;
				
				try {
					// 使用新的API服务
					import('@/api').then(({ cartApi }) => {
						cartApi.addToCart({
							food: {
								id: food.id
							},
							quantity: 1
						})
						.then(() => {
							console.log('添加到购物车成功');
						})
						.catch(error => {
							console.error('添加到购物车失败:', error);
							food.quantity--; // 恢复数量
						});
					});
				} catch (error) {
					console.error('API加载失败:', error);
					food.quantity--; // 恢复数量
				}
			},

			minus(index) {
				let food = this.foodArr[index];
				if (food.quantity > 0) {
					food.quantity--;
					
					try {
						// 使用新的API服务
						import('@/api').then(({ cartApi }) => {
							if (food.quantity === 0) {
								// 删除购物车项
								cartApi.removeFromCart({
									food: {
										id: food.id
									}
								})
								.then(() => {
									console.log('从购物车移除成功');
								})
								.catch(error => {
									console.error('从购物车移除失败:', error);
									food.quantity++; // 恢复数量
								});
							} else {
								// 更新购物车数量
								cartApi.updateCart({
									food: {
										id: food.id
									},
									quantity: food.quantity
								})
								.then(() => {
									console.log('更新购物车成功');
								})
								.catch(error => {
									console.error('更新购物车失败:', error);
									food.quantity++; // 恢复数量
								});
							}
						});
					} catch (error) {
						console.error('API加载失败:', error);
						food.quantity++; // 恢复数量
					}
				}
			},
			savaCart(index) {
				this.$axios.post('/api/CartController/saveCart', this.$qs.stringify({
					businessId: this.businessId,
					userId: this.user.userId,
					foodId: this.foodArr[index].foodId
				})).then(response => {
					let result = response.data || response;  // 获取实际返回值
					console.log('添加购物车响应:', result);
					
					if (result == 1) {
						this.foodArr[index].quantity = 1;
						this.foodArr.sort();
						console.log('添加购物车成功');
					} else {
						console.error('添加购物车失败，返回值:', result);
						alert('向购物车中添加食品失败！');
					}
				}).catch(error => {
					console.error('添加购物车异常:', error);
					alert('向购物车中添加食品失败！');
				});
			},
			updateCart(index, num) {
				this.$axios.post('/api/CartController/updateCart', this.$qs.stringify({
					businessId: this.businessId,
					userId: this.user.userId,
					foodId: this.foodArr[index].foodId,
					quantity: this.foodArr[index].quantity + num
				})).then(response => {
					let result = response.data || response;  // 获取实际返回值
					console.log('更新购物车响应:', result);
					
					if (result == 1) {
						this.foodArr[index].quantity += num;
						this.foodArr.sort();
						console.log('更新购物车成功');
					} else {
						console.error('更新购物车失败，返回值:', result);
						alert('向购物车中更新食品失败！');
					}
				}).catch(error => {
					console.error('更新购物车异常:', error);
					alert('向购物车中更新食品失败！');
				});
			},
			removeCart(index) {
				console.log('删除购物车请求参数:', {
					businessId: this.businessId,
					userId: this.user.userId,
					foodId: this.foodArr[index].foodId,
					foodName: this.foodArr[index].foodName
				});
				
				this.$axios.post('/api/CartController/removeCart', this.$qs.stringify({
					businessId: this.businessId,
					userId: this.user.userId,
					foodId: this.foodArr[index].foodId
				})).then(response => {
					let result = response.data || response;  // 获取实际返回值
					console.log('删除购物车响应:', response);
					console.log('删除购物车返回值:', result);
					
					// 根据后端逻辑，删除成功返回1（影响行数），失败返回0
					if (result == 1) {
						this.foodArr[index].quantity = 0;
						this.foodArr.sort();
						console.log('删除购物车成功');
					} else if (result == 0) {
						// 返回0可能意味着没有找到要删除的记录，但我们仍然将前端状态设为0
						console.warn('删除购物车返回0，可能记录不存在，但仍设置前端状态为0');
						this.foodArr[index].quantity = 0;
						this.foodArr.sort();
					} else {
						console.error('删除购物车失败，返回值:', result);
						alert('从购物车中删除食品失败！');
					}
				}).catch(error => {
					console.error('删除购物车异常:', error);
					alert('从购物车中删除食品失败！');
				});
			},
			// 显示购物车详情
			showCartDetail() {
				if (this.totalQuantity === 0) return;
				this.showCartDetailModal = !this.showCartDetailModal;
			},
			
			// 隐藏购物车详情
			hideCartDetail() {
				this.showCartDetailModal = false;
				console.log('隐藏购物车详情');
			},
			
			// 根据foodId获取在foodArr中的索引
			getFoodIndexById(foodId) {
				return this.foodArr.findIndex(item => (item.id || item.foodId) === foodId);
			},
			
			// 清空购物车
			clearCart() {
				if (this.totalQuantity === 0) return;
				
				try {
					// 使用新的API服务
					import('@/api').then(({ cartApi }) => {
						// 对于每个购物车项，调用删除API
						let promises = [];
						for (let food of this.foodArr) {
							if (food.quantity > 0) {
								promises.push(cartApi.removeFromCart({ 
									food: {
										id: food.id
									}
								}));
								food.quantity = 0;
							}
						}
						
						Promise.all(promises)
							.then(() => {
								console.log('购物车清空成功');
								this.showCartDetailModal = false; // 关闭弹窗
							})
							.catch(error => {
								console.error('清空购物车失败:', error);
								// 重新加载购物车
								this.listCart();
							});
					});
				} catch (error) {
					console.error('API加载失败:', error);
				}
			},

			// 去结算
			toOrder() {
				if (this.totalQuantity === 0 || this.totalSettle < (this.business?.startPrice || 0)) {
					return;
				}
				
				if (!this.user) {
					this.$router.push('/login');
					return;
				}
				
				this.$router.push({
					path: '/orders',
					query: {
						businessId: this.businessId
					}
				});
			},
			goToIndex() {
				this.$router.push('/');
			}
		},
		computed: {
			totalPrice() {
				let total = 0;
				for (let item of this.foodArr) {
					total += (item.foodPrice || 0) * item.quantity;
				}
				return total.toFixed(2);
			},
			totalQuantity() {
				let quantity = 0;
				for (let item of this.foodArr) {
					quantity += item.quantity;
				}
				return quantity;
			},
			totalSettle() {
				// 将totalPrice转换为数值
				const price = parseFloat(this.totalPrice);
				return price + (this.business ? this.business.deliveryPrice || 0 : 0);
			},
			// 购物车项目列表
			cartItems() {
				return this.foodArr.filter(food => food.quantity > 0).map(food => ({
					foodId: food.id || food.foodId,
					foodName: food.foodName || '未知商品',
					foodImg: food.foodImg || '/src/assets/sp01.png', // 使用已经设置好的foodImg或默认图片
					foodPrice: food.foodPrice || 0,
					quantity: food.quantity,
					foodExplain: food.foodExplain || ''
				}));
			}
		},
		watch: {
			// 监听路由参数变化
			'$route.query.businessId': {
				handler(newBusinessId, oldBusinessId) {
					console.log('=== 路由参数变化 ===');
					console.log('新商家ID:', newBusinessId);
					console.log('旧商家ID:', oldBusinessId);
					
					if (newBusinessId && newBusinessId !== oldBusinessId) {
						this.businessId = newBusinessId;
						this.business = null;
						this.foodArr = [];
						this.hasError = false;
						this.errorMessage = '';
						this.isLoading = true;
						
						// 重新加载数据
						this.loadBusinessData();
					}
				},
				immediate: false
			}
		}
	}
</script>

<style scoped>
	/****************** 总容器 ******************/
	.wrapper {
		width: 100%;
		height: 100%;
	}

	/****************** header部分 ******************/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;

		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;

		display: flex;
		justify-content: center;
		align-items: center;
	}

	.wrapper header i {
		font-size: 6vw;
		position: absolute;
		left: 4vw;
		cursor: pointer;
	}

	/****************** 商家logo部分 ******************/
	.wrapper .business-logo {
		width: 100%;
		height: 35vw;
		/*使用上外边距避开header部分*/
		margin-top: 12vw;

		display: flex;
		justify-content: center;
		align-items: center;
	}

	.wrapper .business-logo img {
		width: 40vw;
		height: 30vw;
		border-radius: 5px;
	}

	/****************** 商家信息部分 ******************/
	.wrapper .business-info {
		width: 100%;
		height: 20vw;

		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.wrapper .business-info h1 {
		font-size: 5vw;
	}

	.wrapper .business-info p {
		font-size: 3vw;
		color: #666;
		margin-top: 1vw;
	}

	/****************** 食品列表部分 ******************/
	.wrapper .food {
		width: 100%;
		/*使用下外边距避开footer部分*/
		margin-bottom: 14vw;
	}

	.wrapper .food li {
		width: 100%;
		box-sizing: border-box;
		padding: 2.5vw;
		user-select: none;

		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.wrapper .food li .food-left {
		display: flex;
		align-items: center;
	}

	.wrapper .food li .food-left img {
		width: 20vw;
		height: 20vw;
	}

	.wrapper .food li .food-left .food-left-info {
		margin-left: 3vw;
	}

	.wrapper .food li .food-left .food-left-info h3 {
		font-size: 3.8vw;
		color: #555;
	}

	.wrapper .food li .food-left .food-left-info p {
		font-size: 3vw;
		color: #888;
		margin-top: 2vw;
	}

	.wrapper .food li .food-right {
		width: 16vw;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.wrapper .food li .food-right .fa-minus-circle {
		font-size: 5.5vw;
		color: #999;
		cursor: pointer;
	}

	.wrapper .food li .food-right p {
		font-size: 3.6vw;
		color: #333;
	}

	.wrapper .food li .food-right .fa-plus-circle {
		font-size: 5.5vw;
		color: #0097EF;
		cursor: pointer;
	}

	/****************** 购物车部分 ******************/
	.wrapper .cart {
		width: 100%;
		height: 14vw;

		position: fixed;
		left: 0;
		bottom: 0;

		display: flex;
	}

	.wrapper .cart .cart-left {
		flex: 2;
		background-color: #505051;
		display: flex;
	}

	.wrapper .cart .cart-left .cart-left-icon {
		width: 16vw;
		height: 16vw;
		box-sizing: border-box;
		border: solid 1.6vw #444;
		border-radius: 8vw;
		background-color: #3190E8;
		font-size: 7vw;
		color: #fff;

		display: flex;
		justify-content: center;
		align-items: center;

		margin-top: -4vw;
		margin-left: 3vw;

		position: relative;
	}

	.wrapper .cart .cart-left .cart-left-icon-quantity {
		width: 5vw;
		height: 5vw;
		border-radius: 2.5vw;
		background-color: red;
		color: #fff;
		font-size: 3.6vw;

		display: flex;
		justify-content: center;
		align-items: center;

		position: absolute;
		right: -1.5vw;
		top: -1.5vw;
	}

	.wrapper .cart .cart-left .cart-left-info p:first-child {
		font-size: 4.5vw;
		color: #fff;
		margin-top: 1vw;
	}

	.wrapper .cart .cart-left .cart-left-info p:last-child {
		font-size: 2.8vw;
		color: #AAA;
	}

	.wrapper .cart .cart-right {
		flex: 1;
	}

	/*达到起送费时的样式*/
	.wrapper .cart .cart-right .cart-right-item {
		width: 100%;
		height: 100%;
		background-color: #38CA73;
		color: #fff;
		font-size: 4.5vw;
		font-weight: 700;
		user-select: none;
		cursor: pointer;

		display: flex;
		justify-content: center;
		align-items: center;
	}

	/*不够起送费时的样式（只有背景色和鼠标样式的区别）*/
	/*
	.wrapper .cart .cart-right .cart-right-item{
		width: 100%;
		height: 100%;
		background-color: #535356;
		color: #fff;
		font-size: 4.5vw;
		font-weight: 700;
		user-select: none;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
	*/

	/****************** 加载状态 ******************/
	.loading-container {
		width: 100%;
		height: 50vh;
		margin-top: 12vw;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.loading-text {
		font-size: 4vw;
		color: #666;
	}

	/****************** 错误状态 ******************/
	.error-container {
		width: 100%;
		height: 50vh;
		margin-top: 12vw;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.error-text {
		text-align: center;
		padding: 5vw;
	}

	.error-text p {
		font-size: 3.5vw;
		color: #666;
		margin: 2vw 0;
	}

	.retry-btn {
		background-color: #0097FF;
		color: white;
		border: none;
		padding: 2vw 4vw;
		border-radius: 1vw;
		font-size: 3.5vw;
		cursor: pointer;
		margin-top: 2vw;
	}

	.retry-btn:hover {
		background-color: #0080dd;
	}

	/****************** 占位符样式 ******************/
	.business-logo-placeholder {
		width: 100%;
		height: 35vw;
		margin-top: 12vw;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.placeholder-img {
		width: 40vw;
		height: 30vw;
		border: 2px dashed #ccc;
		border-radius: 5px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #999;
	}

	.placeholder-img i {
		font-size: 8vw;
		margin-bottom: 1vw;
	}

	.placeholder-img p {
		font-size: 3vw;
	}

	.business-info-placeholder {
		width: 100%;
		height: 20vw;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #666;
	}

	.no-food {
		width: 100%;
		padding: 10vw 0;
		text-align: center;
		color: #999;
		font-size: 4vw;
		margin-bottom: 14vw;
	}

	/****************** 购物车详情弹窗 ******************/
	.cart-detail-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 2000;
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}

	.cart-detail-modal {
		width: 100%;
		max-height: 80vh;
		background-color: #fff;
		border-radius: 4vw 4vw 0 0;
		display: flex;
		flex-direction: column;
		animation: slideUp 0.3s ease-out;
	}

	@keyframes slideUp {
		from {
			transform: translateY(100%);
		}
		to {
			transform: translateY(0);
		}
	}

	.cart-detail-header {
		padding: 4vw;
		border-bottom: 1px solid #eee;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
	}

	.cart-detail-header h3 {
		font-size: 4.5vw;
		color: #333;
		margin: 0;
		text-align: center;
		flex: 1;
	}

	.cart-detail-header .close-btn {
		font-size: 5vw;
		color: #999;
		cursor: pointer;
		position: absolute;
		right: 4vw;
		top: 50%;
		transform: translateY(-50%);
	}

	.cart-detail-content {
		flex: 1;
		overflow-y: auto;
		max-height: 50vh;
	}

	.cart-item {
		padding: 3vw 4vw;
		border-bottom: 1px solid #f5f5f5;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.cart-item-info {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.cart-item-img {
		width: 12vw;
		height: 12vw;
		border-radius: 2vw;
		margin-right: 3vw;
	}

	.cart-item-details h4 {
		font-size: 3.8vw;
		color: #333;
		margin: 0 0 1vw 0;
	}

	.cart-item-desc {
		font-size: 3vw;
		color: #999;
		margin: 0 0 1vw 0;
	}

	.cart-item-price {
		font-size: 3.5vw;
		color: #ff6b35;
		margin: 0;
		font-weight: bold;
	}

	.cart-item-controls {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 2vw;
	}

	.quantity-control {
		display: flex;
		align-items: center;
		gap: 2vw;
	}

	.quantity-control .fa-minus-circle,
	.quantity-control .fa-plus-circle {
		font-size: 5vw;
		cursor: pointer;
	}

	.quantity-control .fa-minus-circle {
		color: #999;
	}

	.quantity-control .fa-plus-circle {
		color: #0097EF;
	}

	.quantity-control .quantity {
		font-size: 3.6vw;
		color: #333;
		min-width: 6vw;
		text-align: center;
	}

	.item-total {
		font-size: 3.5vw;
		color: #ff6b35;
		font-weight: bold;
	}

	.cart-empty {
		padding: 10vw;
		text-align: center;
		color: #999;
	}

	.cart-empty .empty-icon {
		font-size: 12vw;
		margin-bottom: 3vw;
		color: #ddd;
	}

	.cart-empty p {
		font-size: 3.5vw;
		margin: 1vw 0;
	}

	.cart-detail-footer {
		border-top: 1px solid #eee;
		padding: 4vw;
	}

	.cart-summary {
		margin-bottom: 4vw;
	}

	.summary-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 1vw 0;
		font-size: 3.5vw;
		color: #666;
	}

	.summary-row.total-row {
		border-top: 1px solid #eee;
		padding-top: 2vw;
		margin-top: 2vw;
		font-weight: bold;
		color: #333;
		font-size: 4vw;
	}

	.cart-actions {
		display: flex;
		gap: 3vw;
	}

	.clear-cart-btn {
		flex: 1;
		padding: 3vw;
		border: 1px solid #ddd;
		background-color: #fff;
		color: #666;
		font-size: 3.5vw;
		border-radius: 2vw;
		cursor: pointer;
	}

	.clear-cart-btn:hover {
		background-color: #f5f5f5;
	}

	.checkout-btn {
		flex: 2;
		padding: 3vw;
		border: none;
		background-color: #38CA73;
		color: #fff;
		font-size: 3.5vw;
		font-weight: bold;
		border-radius: 2vw;
		cursor: pointer;
	}

	.checkout-btn:hover {
		background-color: #2eb85c;
	}

	.checkout-btn.disabled {
		background-color: #ccc;
		cursor: not-allowed;
	}

	.checkout-btn.disabled:hover {
		background-color: #ccc;
	}
</style>